<!-- 商品列表 -->
<template>
  <div>
    <Search></Search>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    </van-pull-refresh>
    <div class="box">
      <van-tree-select
        v-model:active-id="activeId"
        v-model:main-active-index="activeIndex"
        :items="categoryList"
        style="height: 88vh"
        @click-nav="onSelector"
      >
        <template #content>
          <van-card
            class="m-box"
            v-for="item in selectList"
            :key="item.id"
            :price="item.price"
            :desc="item.shop"
            title=""
            :thumb="item.picture"
            @click="onDetail(item.id)"
          />
        </template>
      </van-tree-select>
    </div>
    <div class="tabber">
      <van-tabbar v-model="active" active-color="#ee0a24">
        <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/category/list" icon="search"
          >列表</van-tabbar-item
        >
        <van-tabbar-item replace to="/cart" icon="friends-o"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item replace to="/my" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useProductList } from "@/hook/home";
import Search from "../Search.vue";
import { ref } from "vue";
import { useCategory, useProductDetail } from "@/hook/category";

const active = ref(1);
const { onRefresh, refreshing } = useProductList();
const { activeId, activeIndex, categoryList, selectList, onSelector } =
  useCategory();
const { onDetail } = useProductDetail();
</script>

<style lang="scss" scoped>
.m-box {
  .van-card__header {
    .van-card__content {
      .van-card__desc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
